<template>
  <div class="contant">
    <el-card>
      <el-row type="flex" justify="space-between">
        <!-- 输入框 -->
        <el-form :inline="true" class="demo-form-inline" :model="queryData">
          <el-form-item>
            <el-input
              v-model="queryData.class_name"
              placeholder="学科名称"
              size="small "
            />
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="queryData.subject_id"
              placeholder="归属学科"
              size="small "
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="queryData.state"
              placeholder="显示状态"
              size="small "
            >
              <el-option value="1" label="显示" />
              <el-option value="2" label="隐藏" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              plain
              size="small"
              @click="initData()"
            >搜索</el-button>
            <el-button size="small" @click="chongzhi">重置</el-button>
          </el-form-item>
        </el-form>
        <el-row>
          <el-button
            type="primary"
            plain
            size="small"
            @click="$refs.addForm.dialogShow = true"
          >创建班级</el-button>
        </el-row>
      </el-row>

      <!-- 表格 -->
      <el-table :data="list" border style="width: 100%">
        <el-table-column

          label="#"
          width="50"
          align="center"
          type="expand"
          :header-cell-style="{ color: '#64646d', backgroundColor: '#fafafa' }"
        >
          <template slot-scope="{ row }">
            <el-form
              label-position="left"
              inline

              label-width="100px"
            >
              <el-form-item style="margin-right: 200px">
                <el-form-item
                  label="班级名称"
                ><span>{{ row.class_name }}</span></el-form-item><br>
                <el-form-item
                  label="归属学科"
                ><span>{{ row.subject_name }}</span></el-form-item>

                <br>
                <el-form-item
                  label="创建人"
                ><span>{{ row.username }}</span></el-form-item><br>
                <el-form-item
                  label="开始结束日期"
                ><span>
                  {{ row.start_time | dateFormat }} 至
                  {{ row.end_time | dateFormat }}</span></el-form-item>
              </el-form-item>
              <el-form-item>
                <el-form-item
                  label="创建日期"
                ><span>{{ row.created_at }}</span></el-form-item><br>
                <el-form-item label="讲师">
                  <el-tag
                    v-for="(item, index) in JSON.parse(row.teacher_info)"
                    :key="index"
                    style="margin-right: 10px"
                  >
                    {{ item.username }}
                  </el-tag>
                  <span
                    v-if="JSON.parse(row.teacher_info).length == 0"
                  >没有关联教师</span>
                </el-form-item>

                <br>

                <el-form-item label="助教">
                  <el-tag
                    v-for="(item, index) in JSON.parse(row.zhujiao_info)"
                    :key="index"
                    style="margin-right: 10px"
                    type="success"
                  >
                    {{ item.username }}
                  </el-tag>
                  <span
                    v-if="JSON.parse(row.zhujiao_info).length == 0"
                  >没有关联教师</span></el-form-item><br>

                <el-form-item label="班主任">
                  <el-tag
                    v-for="(item, index) in JSON.parse(row.manager_info)"
                    :key="index"
                    type="warning"
                  >
                    {{ item.username }}
                  </el-tag>
                  <span
                    v-if="JSON.parse(row.manager_info).length == 0"
                  >没有关联教师</span></el-form-item></el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column

          type="index"
          label="序号"
          width="60"
          align="center"
        />
        <el-table-column prop="id" label="班级ID" width="70" align="center" />
        <el-table-column prop="class_name" label="班级名称" width="200" />
        <el-table-column prop="subject_name" label="归属学科" width="160" />
        <el-table-column
          label="讲师"
          width="150"
          align="center"
          prop="teacher_info"
        >
          <template slot-scope="{ row }">
            <el-tag
              v-for="(item, index) in JSON.parse(row.teacher_info)"
              :key="index"
              style="margin-right: 10px"
            >
              {{ item.username }}
            </el-tag>
            <span
              v-if="JSON.parse(row.teacher_info).length == 0"
            >没有关联教师</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="zhujiao_info"
          label="助教"
          width="150"
          align="center"
          style="margin-right: 10px"
        >
          <template slot-scope="{ row }">
            <el-tag
              v-for="(item, index) in JSON.parse(row.zhujiao_info)"
              :key="index"
              style="margin-right: 10px"
              type="success"
            >
              {{ item.username }}
            </el-tag>
            <span
              v-if="JSON.parse(row.zhujiao_info).length == 0"
            >没有关联教师</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="manager_info"
          label="班主任"
          width="150"
          align="center"
        >
          <template slot-scope="{ row }">
            <el-tag
              v-for="(item, index) in JSON.parse(row.manager_info)"
              :key="index"
              type="warning"
            >
              {{ item.username }}
            </el-tag>
            <span
              v-if="JSON.parse(row.manager_info).length == 0"
            >没有关联教师</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="username"
          label="创建人"
          width="140"
          align="center"
        />
        <el-table-column
          prop="state"
          label="是否显示"
          width="120"
          align="center"
        >
          <template slot-scope="{ row }">
            <el-switch
              v-model="row.state"
              active-text="是"
              :active-value="1"
              :inactive-value="2"
              inactive-text="否"
              @change="stateEdit(row.state, row.id)"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="start_time"
          label="开始结束日期"
          width="240"
          align="center"
        >
          <template slot-scope="{ row }">
            {{ row.start_time | dateFormat }} 至 {{ row.end_time | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column label="创建日期" width="160" align="center">
          <template slot-scope="{ row }">
            {{ row.created_at }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template slot-scope="{ row }">
            <el-button
              size="small"
              type="primary"
              icon="el-icon-edit"
              circle
              @click="editHandler(row.id)"
            />
            <el-button
              size="small"
              type="danger"
              icon="el-icon-delete"
              circle
              @click="delBtn(row.id)"
            />
          </template>
        </el-table-column>
      </el-table>
      <br>
      <!-- 分页 -->
      <el-pagination
        :current-page="queryData.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryData.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <!-- 新增、修改弹框区域 -->
    <addForm ref="addForm" @updateList="initData" />
  </div>
</template>
<script>
import {
  getClassList,
  StateClassListApi,
  delClassList,
  getClassName,
  StateTagyApi
} from '@/api/class'
import addForm from './components/addForm.vue'
export default {
  name: 'AdvPos',
  components: {
    addForm
  },
  filters: {
    dateFormat(time) {
      const date = new Date(time)
      const year = date.getFullYear()
      const month =
        date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()

      // 拼接  b
      return year + '-' + month + '-' + day
    }
  },
  data() {
    return {
      list: [], // 表格数据
      totalNum: 0, // 总数
      // 列表的需要的参数
      queryData: {
        class_name: '',
        state: '',
        page: 1,
        limit: 10,
        subject_id: '',
        selectList: []
      },
      options: []
    }
  },
  created() {
    // 调用初始化
    this.initData()
    this.getClassName()
  },
  methods: {
    // 是否
    async stateEdit(state, id) {
      await StateTagyApi({
        id: id,
        state: state === 2 ? 2 : 1
      })
      this.$message.success('修改成功')
    },
    async getClassName() {
      this.options = await getClassName()
    },
    // 初始化数据
    async initData() {
      // 发起请求
      const res = await getClassList(this.queryData)

      console.log(res)
      // 数据可能需要加工
      // 赋值
      this.totalNum = res.total
      this.list = res.list
    },
    // 搜索提交
    onSubmit() {
      // 页码变成1
      this.queryData.page = 1
      // 拉取列表
      this.initData()
    },
    // 搜索重置
    onReset() {
      // 重置搜索表单
      this.queryData = {
        class_name: '',
        page: 1,
        limit: 10,
        state: ''
      }
      // 拉取列表
    },
    // 每页数量变化的时候
    handleSizeChange(size) {
      // newSize 最新的每页数量
      this.queryData.limit = size
      // 调用请求接口刷新页面
      this.initData()
    },
    // 页码变化事件
    handleCurrentChange(size) {
      // newPage 最新的页码
      this.queryData.page = size
      this.initData()
    },
    // 修改事件
    async editHandler(id) {
      // 获取改行的数据
      const res = await StateClassListApi(id)

      this.$refs.addForm.formData = res
      console.log(res)
      this.$refs.addForm.formData.zhujiao_info = JSON.parse(res.zhujiao_info).map(
        (item) => item.username
      )
      this.$refs.addForm.formData.manager_info = JSON.parse(res.manager_info).map(
        (item) => item.username
      )
      // console.log(this.formData.manager_info);
      this.$refs.addForm.formData.teacher_info = JSON.parse(res.teacher_info).map(
        (item) => item.username
      )

      this.$refs.addForm.formData.start_time = res.start_time
        .substring(0, 19)
        .replace('T', ' ')
      this.$refs.addForm.formData.end_time = res.end_time.substring(0, 19).replace('T', ' ')
      this.Time = [
        this.$refs.addForm.formData.start_time,
        (this.$refs.addForm.formData.end_time = res.end_time)
      ]

      // // 赋给弹框里面的表单
      this.$refs.addForm.formData = res
      // 复杂点：一些负责的表单控件需要手动去回显
      // 打开弹框
      this.$refs.addForm.dialogShow = true
    },
    // 删除事件
    async delBtn(rowId) {
      // 弹出确认框
      await this.$confirm('确认删除吗')
      // 发生删除请求
      await delClassList(rowId)
      // 提示成功,
      this.$message.success('删除成功')
      // 边缘问题：如果不是第一页，且这一页只有一个，且删除成功，页码需要-1
      if (this.queryData.page > 1 && this.list.length === 1) {
        this.queryData.page--
      }
      // 列表更新
      this.initData()
    }

  }
}
</script>
<style scoped>
.container {
  padding: 30px;
}

.container{
  background-color: #fff;
  margin: 20px;
}

.p{
  margin-top: 3px;
}

.q{
  margin-left: 9px;
  margin-right: 9px;
}

.w{
  margin-left: 408px;
}

  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
